<template>
  <div class="profile-page">
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-info">
        <div class="user-avatar">
          <div 
            class="avatar-letter"
            :style="{ backgroundColor: userInfo.avatarColor }"
          >
            {{ userInfo.avatar }}
          </div>
        </div>
        <div class="user-details">
          <h2 class="user-name">{{ userInfo.name }}</h2>
          <p class="user-department">{{ userInfo.department }}</p>
          <p class="user-position">{{ userInfo.phone }}</p>
          <p class="user-email">{{ userInfo.orgName }}</p>
        </div>
      </div>
      <van-button
        type="primary"
        plain
        size="small"
        @click="editProfile"
      >
        编辑资料
      </van-button>
    </div>

    <!-- 工作统计 -->
    <!-- <div class="work-stats">
      <van-cell-group inset>
        <van-cell title="参与项目" :value="workStats.projects" />
        <van-cell title="完成任务" :value="workStats.completedTasks" />
        <van-cell title="团队贡献" :value="workStats.contribution" />
        <van-cell title="本月活跃" :value="workStats.activeDays + '天'" />
      </van-cell-group>
    </div> -->

    <!-- 所属组织 -->
    <div class="menu-section">
      <van-cell-group inset>
        <van-cell
          title="切换组织"
          icon="shop-o"
          is-link
          @click="showOrgSelectorDialog"
        />
      </van-cell-group>
    </div>

    <!-- 消息通知 -->
    <div class="menu-section">
      <van-cell-group inset>
        <van-cell
          title="消息通知"
          icon="chat-o"
          is-link
          @click="goToNotifications"
        >
          <!-- <template #right-icon>
            <van-badge :content="notificationCount" v-if="notificationCount > 0">
              <van-icon name="bell-o" />
            </van-badge>
          </template> -->
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 设置菜单 -->
    <div class="settings-section">
      <van-cell-group inset>
        <van-cell
          title="账户设置"
          icon="setting-o"
          is-link
          @click="goToAccountSettings"
        />
        <van-cell
          title="隐私设置"
          icon="shield-o"
          is-link
          @click="goToPrivacySettings"
        />
        <van-cell
          title="帮助中心"
          icon="question-o"
          is-link
          @click="goToHelp"
        />
        <van-cell
          title="关于我们"
          icon="info-o"
          is-link
          @click="goToAbout"
        />
      </van-cell-group>
    </div>

    <!-- 退出登录 -->
    <div class="logout-section">
      <van-button
        type="danger"
        plain
        block
        @click="logout"
      >
        退出登录
      </van-button>
    </div>
  </div>
  
  <!-- 组织选择器 -->
  <OrgSelector
    v-model="showOrgSelector"
    :org-list="orgListData"
    @confirm="onOrgConfirm"
  />
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast, showConfirmDialog } from 'vant'
import { useAuthStore } from '@/stores/auth'
import { loginAPI } from '@/api/auth'
import OrgSelector from '@/components/OrgSelector.vue'

const router = useRouter()
const authStore = useAuthStore()

// 用户信息
const userInfo = computed(() => {
  // 兼容不同的数据结构
  const user = authStore.user
  const account = user?.account || user
  
  // 获取用户名，优先使用accountName，然后是username，最后是name
  const userName = account?.accountName || account?.username || account?.name || '用户'
  const firstLetter = userName ? userName.charAt(0).toUpperCase() : 'U'
  
  // 获取部门名称
  const department = user?.department?.deptName || '未设置部门'
  
  // 获取手机号
  const phone = account?.phone || user?.phone || '未设置手机号'
  
  // 获取组织名称，优先使用orgName，然后从orgList中获取当前组织
  let orgName = user?.orgName || '未设置组织'
  if (orgName === '未设置组织' && user?.orgList && user.orgList.length > 0) {
    // 查找当前登录的组织（latestLogin === 2）
    const currentOrg = user.orgList.find(org => org.latestLogin === 2)
    if (currentOrg) {
      orgName = currentOrg.orgName
    } else {
      // 如果没有找到当前登录的组织，使用第一个组织
      orgName = user.orgList[0].orgName
    }
  }
  
  return {
    name: userName,
    department: department,
    phone: phone,
    orgName: orgName,
    avatar: firstLetter,
    avatarColor: getAvatarColor(firstLetter)
  }
})

// 根据字母生成头像颜色
const getAvatarColor = (letter) => {
  const colors = [
    '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7',
    '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9'
  ]
  const index = letter.charCodeAt(0) % colors.length
  return colors[index]
}

// 工作统计
// const workStats = reactive({
//   projects: 8,
//   completedTasks: 45,
//   contribution: '优秀',
//   activeDays: 22
// })

// 通知数量
const notificationCount = ref(3)

// 组织选择器相关
const showOrgSelector = ref(false)
const orgListData = ref([])

// 当前组织名称
const currentOrgName = computed(() => {
  return authStore.user?.orgName || '未设置组织'
})

// 组织列表（从用户数据中获取）
const orgList = computed(() => {
  return authStore.user?.orgList || []
})

// 编辑资料
const editProfile = () => {
  showToast('编辑资料功能开发中')
}

// 跳转到我的项目
// const goToMyProjects = () => {
//   showToast('我的项目功能开发中')
// }

// 跳转到我的任务
// const goToMyTasks = () => {
//   showToast('我的任务功能开发中')
// }

// 显示组织选择器
const showOrgSelectorDialog = () => {
  if (orgList.value.length === 0) {
    showToast('暂无可切换的组织')
    return
  }
  
  if (orgList.value.length === 1) {
    showToast('您只有一个组织，无需切换')
    return
  }
  
  // 显示组织选择器弹窗
  showOrgSelector.value = true
  orgListData.value = orgList.value
}

// 切换组织
const switchOrganization = async (org) => {
  try {
    // 调用后台接口更新用户组织
    await loginAPI.updateUserOrg(org.orgId)
    
    // 更新用户信息中的组织
    if (authStore.user) {
      // 创建新的用户对象，确保响应式更新
      const updatedUser = {
        ...authStore.user,
        orgName: org.orgName,
        orgId: org.orgId,
        orgCode: org.orgCode
      }
      
      // 更新 Pinia store
      authStore.user = updatedUser
      localStorage.setItem('user', JSON.stringify(updatedUser))
    }
    
    showSuccessToast(`已切换到：${org.orgName}`)
  } catch (error) {
    console.error('更新组织失败:', error)
    
    // 即使接口调用失败，也要更新本地状态
    if (authStore.user) {
      const updatedUser = {
        ...authStore.user,
        orgName: org.orgName,
        orgId: org.orgId,
        orgCode: org.orgCode
      }
      
      authStore.user = updatedUser
      localStorage.setItem('user', JSON.stringify(updatedUser))
    }
    
    showSuccessToast(`已切换到：${org.orgName}`)
  }
}

// 组织选择确认
const onOrgConfirm = async (selectedOrg) => {
  try {
    // 调用后台接口更新用户组织，后台会触发重新登录并返回新的token
    const response = await loginAPI.updateUserOrg(selectedOrg.orgId)
    
    // 更新用户信息和token
    if (authStore.user && response) {
      // 获取新的token（可能在response.token或response.data.token中）
      const newToken = response.token || response.data?.token
      
      // 更新用户信息
      const updatedUser = {
        ...authStore.user,
        ...response.data,  // 合并完整的用户信息
        orgId: selectedOrg.orgId,
        orgName: selectedOrg.orgName,
        orgCode: selectedOrg.orgCode,
        orgList: response.data?.orgList || authStore.user.orgList || []
      }
      
      authStore.user = updatedUser
      localStorage.setItem('user', JSON.stringify(updatedUser))
      
      // 更新token
      if (newToken) {
        authStore.token = newToken
        localStorage.setItem('token', newToken)
        console.log('Token已更新:', newToken)
      } else {
        console.warn('未找到新token')
      }
    }

    // 调用queryUserInfo接口获取最新的用户信息
    const userInfoResponse = await loginAPI.queryUserInfo();
    localStorage.setItem('user', JSON.stringify(userInfoResponse.data));

    // 更新所属组织下拉数据
    orgListData.value = response.data?.orgList || authStore.user.orgList || []

    showSuccessToast(`已切换到：${selectedOrg.orgName}`)
  } catch (error) {
    console.error('更新组织失败:', error)
    
    // 如果是token失效，响应拦截器已经处理了跳转，这里不需要额外处理
    if (error.message && error.message.includes('token失效')) {
      return
    }
    
    // 其他错误，仍然更新本地状态
    if (authStore.user) {
      const updatedUser = {
        ...authStore.user,
        orgId: selectedOrg.orgId,
        orgName: selectedOrg.orgName,
        orgCode: selectedOrg.orgCode
      }
      
      authStore.user = updatedUser
      localStorage.setItem('user', JSON.stringify(updatedUser))
    }
    
    showSuccessToast(`已切换到：${selectedOrg.orgName}`)
  }
}

// 跳转到消息通知
const goToNotifications = () => {
  showToast('消息通知功能开发中')
}

// 跳转到文件管理
// const goToFiles = () => {
//   showToast('文件管理功能开发中')
// }

// 跳转到账户设置
const goToAccountSettings = () => {
  showToast('账户设置功能开发中')
}

// 跳转到隐私设置
const goToPrivacySettings = () => {
  showToast('隐私设置功能开发中')
}

// 跳转到帮助中心
const goToHelp = () => {
  showToast('帮助中心功能开发中')
}

// 跳转到关于我们
const goToAbout = () => {
  showToast('关于我们功能开发中')
}

// 退出登录
const logout = async () => {
  try {
    await showConfirmDialog({
      title: '确认退出',
      message: '确定要退出登录吗？'
    })
    
    try {
      // 调用后台退出登录接口
      await loginAPI.logout()
    } catch (error) {
      console.error('退出登录接口调用失败:', error)
      // 即使接口调用失败，也要清除本地状态
    }
    
    // 使用状态管理清除登录状态
    authStore.logout()
    
    showSuccessToast('已退出登录')
    
    // 跳转到登录页
    router.push('/login')
  } catch {
    // 用户取消操作
  }
}

onMounted(() => {
  // 检查登录状态
  if (!authStore.isLoggedIn) {
    router.push('/login')
    return
  }
  
  // 显示调试信息
  console.log('我的页面加载完成')
  console.log('用户信息:', authStore.user)
  console.log('用户数据结构:', JSON.stringify(authStore.user, null, 2))
  console.log('计算后的用户信息:', userInfo.value)
  
  // 检查localStorage中的数据
  const storedUser = localStorage.getItem('user')
  if (storedUser) {
    console.log('localStorage中的用户数据:', JSON.parse(storedUser))
  }
})
</script>

<style lang="scss" scoped>
.profile-page {
  padding-bottom: var(--spacing-lg);
}

.user-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: var(--spacing-xl);
  margin: var(--spacing-md);
  border-radius: var(--border-radius-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .user-info {
    display: flex;
    align-items: center;
    flex: 1;
  }
  
  .user-avatar {
    margin-right: var(--spacing-md);
    
    .avatar-letter {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-weight: 600;
      color: white;
      border: 3px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transition: all 0.3s ease;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
    
    &:hover .avatar-letter {
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }
  }
  
  .user-details {
    flex: 1;
  }
  
  .user-name {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
  }
  
  .user-department {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.95;
    margin-bottom: var(--spacing-xs);
  }
  
  .user-position {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: var(--spacing-xs);
  }
  
  .user-email {
    font-size: 12px;
    opacity: 0.8;
  }
}

/* .work-stats, */
.menu-section,
.settings-section {
  margin: var(--spacing-md);
}

.logout-section {
  margin: var(--spacing-md);
  padding-top: var(--spacing-lg);
}

// 平板适配
@media screen and (min-width: 768px) {
  .profile-page {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .user-card {
    margin: var(--spacing-lg) auto;
    max-width: 800px;
  }
  
  /* .work-stats, */
  .menu-section,
  .settings-section,
  .logout-section {
    margin: var(--spacing-lg) auto;
    max-width: 800px;
  }
}
</style>
